import React from 'react'
import u from '../common.js';
import Table from './table.jsx'
import { Button, DatePicker } from 'antd';
import 'moment/locale/zh-cn';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import '../static/disposal.less'
import moment from 'moment';
import '../static/keywords.less'
// const { RangePicker } = DatePicker;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

export default class Capture extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      operation: [],
      baten: 'capture',
      content: '',
      source: '',
      publishTime: '',
      endTime: '',
      currentCount: 0,
      pageSize: 10,
      searchList: [],
      total: null,
      reset: null,
      timeValue: []
    }
  }

  onReset() {
    this.refs.jingque.value = ''
    localStorage.setItem('jingquechaxun', '')
    localStorage.setItem('timeStart', '')
    localStorage.setItem('timeEnd', '')
    localStorage.setItem('getSource', null)
    localStorage.setItem('setResetWord', 'yes')
    this.setState({
      timeValue: []
      
  })
    this.snatchAt()
    this.setState({
      reset: 1
    })
  }

  snatchAt() {
    u.getMessage({
      "currentCount": 0,
      "pageSize": 10
    }, data => {
      this.setState({
        searchList: data.indexList,
        total: data.total
      })
    })
  }

  onSearch() {
    this.setState({
      reset: null
    })
    localStorage.setItem('jingquechaxun', this.state.content,)
    localStorage.setItem('timeStart', this.state.publishTime)
    localStorage.setItem('timeEnd', this.state.endTime)
    localStorage.getItem('getSource')
    u.searchMessage({
      "description": this.state.content,
      "source": localStorage.getItem('getSource'),
      "publish_time": this.state.publishTime,
      "endTime": this.state.endTime,
      "currentCount": this.state.currentCount,
      "pageSize": this.state.pageSize,
    }, data => {
      this.setState({
        searchList: data.indexListByCondition,
        total: data.total
      })
    })
  }

  onContent(e) {
    this.setState({
      content: e.target.value
    })
    console.log(e.target.value)

  }

  onContent2(e) {
    this.setState({
      source: e.target.value
    })
    console.log(e.target.value)
  }


  onChangeDate = (date, dateString) => {
    if (dateString[0] === '' && dateString[1] === '') {
      this.setState({
          timeValue: ['',''],
          publishTime: '',
          endTime: ''
      })
      return
  }
    this.setState({
      publishTime: dateString[0].split(' ')[0],
      endTime: dateString[1].split(' ')[0],
      timeValue: [moment(dateString[0]),moment(dateString[1])]
    })
  }

  render() {
    return (
      <div className='bigbox'>
        <div className='bigbox-top'>
          <ul>
            <li>
              <span>精确查询:</span>
              <input type="text" ref='jingque' onChange={(e) => { this.onContent(e) }} />
            </li>
            {/* <li>
              <span>来源:</span>
              <input type="text" ref='laiyuan' placeholder='请输入内容' onChange={(e) => { this.onContent2(e) }} />
            </li> */}
            <li>
              <span>选择时间：</span>
              <RangePicker
                locale={locale}
                showTime={{ format: 'HH:mm' }}
                format="YYYY-MM-DD HH:mm"
                placeholder={['开始日期', '结束日期']}
                value={this.state.timeValue}
                onChange={this.onChangeDate}
                onOk={this.onOkDate}
              />
            </li>
            <li>
              <Button className="" type="primary" onClick={() => { this.onSearch() }}>查询</Button>
              <Button className="" onClick={() => { this.onReset() }}>重 置</Button>
            </li>
          </ul>
        </div>
        <Table operation={this.state.operation} baten={this.state.baten} searchDetil={this.state.searchList} totalNum={this.state.total}
          content={this.state.content} source={this.state.source} publishTime={this.state.publishTime} endTime={this.state.endTime} reset={this.state.reset} />
      </div>
    )
  }
}